import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ResizeBox, Tag, Space } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

function App() {
  return (
    <ResizeBox.Split
      direction={'vertical'}
      style={{
        height: '100vh',
        // width: 300,
        // border: '1px solid var(--color-border)',
      }}
      onPaneResize={(panes) => {
        // console.log(panes);
        for (let i = 0; i < panes.length; i++) {
          const e = panes[i];
          console.log('e: ', e.offsetHeight);
        }
      }}
      max={0.8}
      min={0.2}
      panes={[
        <Tag key="first" color="arcoblue">
          Fist
        </Tag>,
        <Tag key="second" color="green">
          Second
        </Tag>,
      ]}
    />
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
